<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!--引入CSS-->
    <link rel="stylesheet" type="text/css" href="/lib/webuploader/webuploader.css">
    <!--引入JS-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="/lib/webuploader/webuploader.html5only.js"></script>
</head>
<body>
    <div id="uploader" class="wu-example">
        <!--用来存放文件信息-->
        <div id="thelist" class="uploader-list"></div>
        <div class="btns">
            <div id="picker">选择文件</div>
            <button id="ctlBtn" class="btn btn-default">开始上传</button>
        </div>
    </div>

    <div class="file-list">

    </div>


    <script>
    $(document).ready(function(){
        
            var uploader = WebUploader.create({
                // 文件接收服务端。
                server: '/fileupload',

                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: {
                    id: '#picker',
                    label: '点击选择文件'
                },
                // 分片上传配置
                chunked: true,// 开起分片上传。
                chunkSize: Math.pow(1024, 2),// 单位字节(Byte)
                threads: 1,//上传并发数
                // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                resize: false
            });

             // 当有文件添加进来的时候
            uploader.on('fileQueued', function( file ) {
                var $list = $(".file-list");
 
                var item = '<div id="' + file.id + '" class="item">' +
                    '<div class="file-info">' +
                    '<h4 class="info">' + file.name + '</h4>' +
                    '<p class="state">等待上传...</p>' +
                    '</div>' +
                    '</div>';
 
                $list.append(item);


                // // 创建缩略图
                // // 如果为非图片文件，可以不用调用此方法。
                // // thumbnailWidth x thumbnailHeight 为 100 x 100
                // uploader.makeThumb( file, function( error, src ) {
                //     if ( error ) {
                //         $img.replaceWith('<span>不能预览</span>');
                //         return;
                //     }

                //     $img.attr( 'src', src );
                // }, thumbnailWidth, thumbnailHeight );
            });

            // 某个文件开始上传前触发,一个文件只触发一次
            uploader.on('uploadStart', function (file) {
                uploader.options.formData.guid = md5([file.id, file.name, file.size, file.type, file['__hash']].join(''));
            });


            uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress .progress-bar');

            // 避免重复创建
            if (!$percent.length) {
                var progress = '<div class="progress progress-striped active">' +
                    '<div class="progress progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                    '</div>';

                $percent = $(progress).prependTo($li).find('.progress-bar');
            }

            $li.find('p.state').text('上传中');

            $percent.css('width', percentage * 100 + '%');
    });

    uploader.on('uploadSuccess', function (file) {
                // console.log(file);
 
                // 如果是分片上传,文件上传成功后执行分片合并并返回Get文件的url
                if (uploader.options.chunked) {
                    $.post('/merge_chunks', {
                        'hash': md5([file.id, file.name, file.size, file.type, file['__hash']].join('')),
                        'name': file.name,
                        'size': file.size
                    }, function (data) {
                        if (data.status) {
                            $('#' + file.id).find('p.state').text('已上传');
                        } else {
                            $('#' + file.id).find('p.state').text('上传错误!');
                        }
                    }, 'json');
                }
            });
 
            uploader.on('uploadError', function (file) {
                $('#' + file.id).find('p.state').text('上传出错');
            });
 
            uploader.on('uploadComplete', function (file) {
                // $('#' + file.id).find('.progress').fadeOut();
            });



            $('#ctlBtn').on('click', function (event) {
                event.stopPropagation();
                uploader.upload();
            });

    


    });

   
    </script>
</body>
</html>